- Class is slightly based on Base.js <http://dean.edwards.name/weblog/2006/03/base/> (c) 2006 Dean Edwards, License <http://creativecommons.org/licenses/LGPL/2.1/>
- Some functions are based on those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
- Documentation by Aaron Newton (aaron.newton [at] cnet [dot] com) and Valerio Proietti.
*/
/*
Class: Class
The base class object of the <http://mootools.net> framework.
Arguments:
properties - the collection of properties that apply to the class. Creates a new class, its initialize method will fire upon class instantiation.
Example:
(start code)
var Cat = new Class({
initialize: function(name){
this.name = name;
}
});
var myCat = new Cat('Micia');
alert myCat.name; //alerts 'Micia'
(end)
*/
var Class = function(properties){
var klass = function(){
if (this.initialize && arguments[0] != 'noinit') return this.initialize.apply(this, arguments);
else return this;
};
for (var property in this) klass[property] = this[property];
klass.prototype = properties;
return klass;
};
/*
Property: empty
Returns an empty function
*/
Class.empty = function(){};
Class.prototype = {
/*
Property: extend
Returns the copy of the Class extended with the passed in properties.
Arguments:
properties - the properties to add to the base class in this new Class.
Example:
(start code)
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = Animal.extend({
initialize: function(name, age){
this.parent(age); //will call the previous initialize;
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
alert myCat.name; //alerts 'Micia'
alert myCat.age; //alerts 20
(end)
*/
extend: function(properties){
var pr0t0typ3 = new this('noinit');
var parentize = function(previous, current){
if (!previous.apply || !current.apply) return false;
return function(){
this.parent = previous;
return current.apply(this, arguments);
};
};
for (var property in properties){
var previous = pr0t0typ3[property];
var current = properties[property];
if (previous && previous != current) current = parentize(previous, current) || current;
pr0t0typ3[property] = current;
}
return new Class(pr0t0typ3);
},
/*
Property: implement
Implements the passed in properties to the base Class prototypes, altering the base class, unlike <Class.extend>.
Arguments:
properties - the properties to add to the base class.
Example:
(start code)
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
Animal.implement({
setName: function(name){
this.name = name
}
});
var myAnimal = new Animal(20);
myAnimal.setName('Micia');
alert(myAnimal.name); //alerts 'Micia'
(end)
*/
implement: function(properties){
for (var property in properties) this.prototype[property] = properties[property];
}
};
/* Section: Object related Functions */
/*
Function: Object.extend
Copies all the properties from the second passed object to the first passed Object.
If you do myWhatever.extend = Object.extend the first parameter will become myWhatever, and your extend function will only need one parameter.
Returns this number; useful because toInt must work on both Strings and Numbers.
*/
toInt: function(){
return parseInt(this);
},
toFloat: function(){
return parseFloat(this);
}
});
/*
Script: Function.js
Contains Function prototypes and utility functions .
Author:
Valerio Proietti, <http://mad4milk.net>
License:
MIT-style license.
Credits:
- Some functions are inspired by those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
*/
/*
Class: Function
A collection of The Function Object prototype methods.
*/
Function.extend({
/*
Property: create
Main function to create closures.
Returns:
a function.
Arguments:
options - An Options object.
Options:
bind - The object that the "this" of the function will refer to. Default is the current function.
event - If set to true, the function will act as an event listener and receive an event as first argument.
If set to a class name, the function will receive a new instance of this class (with the event passed as argument's constructor) as first argument.
Default is false.
arguments - A single argument or array of arguments that will be passed to the function when called.
If both the event and arguments options are set, the event is passed as first argument and the arguments array will follow.
Default is no custom arguments, the function will receive the standard arguments when called.
delay - Numeric value: if set, the returned function will delay the actual execution by this amount of milliseconds and return a timer handle when called.
Default is no delay.
periodical - Numeric value: if set, the returned function will periodically perform the actual execution with this specified interval and return a timer handle when called.
Default is no periodical execution.
attempt - If set to true, the returned function will try to execute and return either the results or the error when called. Default is false.
*/
create: function(options){
var fn = this;
options = Object.extend({
'bind': fn,
'event': false,
'arguments': null,
'delay': false,
'periodical': false,
'attempt': false
}, options || {});
if ($chk(options.arguments) && $type(options.arguments) != 'array') options.arguments = [options.arguments];
return function(event){
var args;
if (options.event){
event = event || window.event;
args = [(options.event === true) ? event : new options.event(event)];
if (options.arguments) args = args.concat(options.arguments);
}
else args = options.arguments || arguments;
var returns = function(){
return fn.apply(options.bind, args);
};
if (options.delay) return setTimeout(returns, options.delay);
if (options.periodical) return setInterval(returns, options.periodical);
if (options.attempt){
try {
return returns();
} catch(err){
return err;
}
}
return returns();
};
},
/*
Property: pass
Shortcut to create closures with arguments and bind.
Returns:
a function.
Arguments:
args - the arguments passed. must be an array if arguments > 1
bind - optional, the object that the "this" of the function will refer to.
Contains useful Element prototypes, to be used with the dollar function <$>.
Authors:
- Valerio Proietti, <http://mad4milk.net>
- Christophe Beyls, <http://digitalia.be>
License:
MIT-style license.
Credits:
- Some functions are inspired by those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
*/
/*
Class: Element
Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
*/
var Element = new Class({
/*
Property: initialize
Creates a new element of the type passed in.
Arguments:
el - the tag name for the element you wish to create.
Example:
>var div = new Element('div');
*/
initialize: function(el){
if ($type(el) == 'string') el = document.createElement(el);
return $(el);
}
});
/*
Section: Utility Functions
Function: $
returns the element passed in with all the Element prototypes applied.
Arguments:
el - a reference to an actual element or a string representing the id of an element
Example:
>$('myElement') // gets a DOM element by id with all the Element prototypes applied.
>var div = document.getElementById('myElement');
>$(div) //returns an Element also with all the mootools extentions applied.
You'll use this when you aren't sure if a variable is an actual element or an id, as
well as just shorthand for document.getElementById().
Returns:
a DOM element or false (if no id was found).
Note:
you need to call $ on an element only once to get all the prototypes.
But its no harm to call it multiple times, as it will detect if it has been already extended.
*/
function $(el){
if (!el) return false;
if (el._element_extended_ || [window, document].test(el)) return el;
if ($type(el) == 'string') el = document.getElementById(el);
if ($type(el) != 'element') return false;
if (['object', 'embed'].test(el.tagName.toLowerCase()) || el.extend) return el;
el._element_extended_ = true;
Garbage.collect(el);
el.extend = Object.extend;
if (!(el.htmlElement)) el.extend(Element.prototype);
page.x - the x position of the mouse, relative to the full window
page.y - the y position of the mouse, relative to the full window
client.x - the x position of the mouse, relative to the viewport
client.y - the y position of the mouse, relative to the viewport
key - the key pressed as a lowercase string. key also returns 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'. Handy for these special keys.
target - the event target
relatedTarget - the event related target
Example:
(start code)
$('myLink').onkeydown = function(event){
var event = new Event(event);
//event is now the Event class.
alert(event.key); //returns the lowercase letter pressed
alert(event.shift); //returns true if the key pressed is shift
if (event.key == 's' && event.control) alert('document saved');
Contains common implementations for custom classes. In Mootools is implemented in <Ajax>, <XHR> and <Fx.Base>.
Author:
Valerio Proietti, <http://mad4milk.net>
License:
MIT-style license.
*/
/*
Class: Chain
An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
Currently implemented in <Fx.Base>, <XHR> and <Ajax>. In <Fx.Base> for example, is used to execute a list of function, one after another, once the effect is completed.
The functions will not be fired all togheter, but one every completion, to create custom complex animations.
Example:
(start code)
var myFx = new Fx.Style('element', 'opacity');
myFx.start(1,0).chain(function(){
myFx.start(0,1);
}).chain(function(){
myFx.start(1,0);
}).chain(function(){
myFx.start(0,1);
});
//the element will appear and disappear three times
(end)
*/
var Chain = new Class({
/*
Property: chain
adds a function to the Chain instance stack.
Arguments:
fn - the function to append.
*/
chain: function(fn){
this.chains = this.chains || [];
this.chains.push(fn);
return this;
},
/*
Property: callChain
Executes the first function of the Chain instance stack, then removes it. The first function will then become the second.
*/
callChain: function(){
if (this.chains && this.chains.length) this.chains.shift().delay(10, this);
},
/*
Property: clearChain
Clears the stack of a Chain instance.
*/
clearChain: function(){
this.chains = [];
}
});
/*
Class: Events
An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
In <Fx.Base> Class, for example, is used to give the possibility add any number of functions to the Effects events, like onComplete, onStart, onCancel
Example:
(start code)
var myFx = new Fx.Style('element', 'opacity').addEvent('onComplete', function(){
alert('the effect is completed');
}).addEvent('onComplete', function(){
alert('I told you the effect is completed');
});
myFx.start(0,1);
//upon completion it will display the 2 alerts, in order.
(end)
*/
var Events = new Class({
/*
Property: addEvent
adds an event to the stack of events of the Class instance.
*/
addEvent: function(type, fn){
if (fn != Class.empty){
this.events = this.events || {};
this.events[type] = this.events[type] || [];
if (!this.events[type].test(fn)) this.events[type].push(fn);
}
return this;
},
/*
Property: fireEvent
fires all events of the specified type in the Class instance.
var current = el.getAttribute(Filters.selector[4]);
if (!current) return false;
var operator = Filters.selector[5];
if (!operator) return true;
var value = Filters.selector[6];
switch (operator){
case '*=': return (current.test(value));
case '=': return (current == value);
case '^=': return (current.test('^'+value));
case '$=': return (current.test(value+'$'));
}
return false;
}
};
/*
Class: Elements
Methods for dom queries arrays, <$$>.
*/
Elements.extend({
getElementsByTagName: function(tagName){
var found = [];
this.each(function(el){
found.extend(el.getElementsByTagName(tagName));
});
return found;
}
});
/*
Script: Hash.js
Contains the class Hash.
Author:
Christophe Beyls, <http://digitalia.be>
License:
MIT-style license.
*/
/*
Class: Hash
It wraps an object that it uses internally as a map. The user must use set(), get(), and remove() to add/change, retrieve and remove values, it must not access the internal object directly. null values are allowed.
Example:
(start code)
var hash = new Hash({a: 'hi', b: 'world', c: 'howdy'});
hash.remove('b'); // b is removed.
hash.set('c', 'hello');
hash.get('c'); // returns 'hello'
hash.length // returns 2 (a and b)
(end)
*/
var Hash = new Class({
length: 0,
obj: {},
initialize: function(obj){
this.extend(obj);
},
/*
Property: get
Retrieves a value from the hash.
Arguments:
key - The key
Returns:
The value
*/
get: function(key){
return this.obj[key];
},
/*
Property: hasKey
Check the presence of a specified key-value pair in the hash.
Arguments:
key - The key
Returns:
True if the Hash contains an value for the specified key, otherwise false
*/
hasKey: function(key){
return this.obj[key] !== undefined;
},
/*
Property: set
Adds a key-value pair to the hash or replaces a previous value associated with the key.
Arguments:
key - The key
value - The value
*/
set: function(key, value){
if (value === undefined) return false;
if (this.obj[key] === undefined) this.length++;
this.obj[key] = value;
return this;
},
/*
Property: remove
Removes a key-value pair from the hash.
Arguments:
key - The key
*/
remove: function(key){
if (this.obj[key] === undefined) return this;
var obj = {};
this.length--;
for (var property in this.obj){
if (property != key) obj[property] = this.obj[property];
}
this.obj = obj;
return this;
},
/*
Property: each
Calls a function for each key-value pair. The first argument passed to the function will be the key, the second one will be the value.
Arguments:
fn - The function to call for each key-value pair
bind - Optional, the object that will be referred to as "this" in the function
*/
each: function(fn, bind){
for (var property in this.obj) fn.call(bind || this, property, this.obj[property]);
},
/*
Property: extend
Extends the current hash with an object containing key-value pairs. Values for duplicate keys will be replaced by the new ones.
Arguments:
obj - An object containing key-value pairs
*/
extend: function(obj){
for (var property in obj){
if (this.obj[property] === undefined) this.length++;
this.obj[property] = obj[property];
}
return this;
},
/*
Property: empty
Checks if the hash is empty.
Returns:
True if the hash is empty, otherwise false
*/
empty: function(){
return (this.length == 0);
},
/*
Property: keys
Returns an array containing all the keys, in the same order as the values returned by <Hash.values>.
Returns:
An array containing all the keys of the hash
*/
keys: function(){
var keys = [];
for (var property in this.obj) keys.push(property);
return keys;
},
/*
Property: values
Returns an array containing all the values, in the same order as the keys returned by <Hash.keys>.
Returns:
An array containing all the values of the hash
*/
values: function(){
var values = [];
for (var property in this.obj) values.push(this.obj[property]);
return values;
}
});
/*
Function: $H
Shortcut to create a Hash from an Object.
*/
function $H(obj){
return new Hash(obj);
};
/*
Script: Color.js
Contains the Color class.
Authors:
- Michael Jackson, <http://ajaxon.com/michael>
- Valerio Proietti, <http://mad4milk.net>
- Christophe Beyls, <http://www.digitalia.be>
License:
MIT-style license.
*/
/*
Class: Color
Creates a new Color Object, which is an array with some color specific methods.
Arguments:
color - the hex, the RGB array or the HSB array of the color to create. For HSB colors, you need to specify the second argument.
type - a string representing the type of the color to create. needs to be specified if you intend to create the color with HSB values, or an array of HEX values. Can be 'rgb', 'hsb' or 'hex'.
Example:
(start code)
var black = new Color('#000');
var purple = new Color([255,0,255]);
// mix black with white and purple, each time at 10% of the new color
Fx.Elements allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format).
Arguments:
elements - a collection of elements the effects will be applied to.
options - same as <Fx.Base> options.
*/
Fx.Elements = Fx.Base.extend({
initialize: function(elements, options){
this.elements = $$(elements);
this.parent(options);
},
setNow: function(){
for (var i in this.from){
var iFrom = this.from[i], iTo = this.to[i], iCss = this.css[i], iNow = this.now[i] = {};
for (var p in iFrom) iNow[p] = iCss[p].getNow(iFrom[p], iTo[p], this);
}
},
set: function(to){
var parsed = {};
this.css = {};
for (var i in to){
var iTo = to[i], iCss = this.css[i] = {}, iParsed = parsed[i] = {};
for (var p in iTo){
iCss[p] = Fx.CSS.select(p, iTo[p]);
iParsed[p] = iCss[p].parse(iTo[p]);
}
}
return this.parent(parsed);
},
/*
Property: start
Applies the passed in style transitions to each object named (see example). Each item in the collection is refered to as a numerical string ("1" for instance). The first item is "0", the second "1", etc.
Example:
(start code)
var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start({
'0': { //let's change the first element's opacity and width
'opacity': [0,1],
'width': [100,200]
},
'1': { //and the second one's opacity
'opacity': [0.2, 0.5]
}
});
(end)
*/
start: function(obj){
if (this.timer && this.options.wait) return this;
this.now = {};
this.css = {};
var from = {}, to = {};
for (var i in obj){
var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {}, iCss = this.css[i] = {};
for (var p in iProps){
var parsed = Fx.CSS.parse(this.elements[i], p, iProps[p]);
iFrom[p] = parsed.from;
iTo[p] = parsed.to;
iCss[p] = parsed.css;
}
}
return this.parent(from, to);
},
increase: function(){
for (var i in this.now){
var iNow = this.now[i], iCss = this.css[i];
for (var p in iNow) this.elements[i].setStyle(p, iCss[p].getValue(iNow[p], this.options.unit));
}
}
});
/*
Script: Fx.Scroll.js
Contains <Fx.Scroll>
Author:
Valerio Proietti, <http://mad4milk.net>
License:
MIT-style license.
*/
/*
Class: Fx.Scroll
Scroll any element with an overflow, including the window element.
The slide effect; slides an element in horizontally or vertically, the contents will fold inside. Extends <Fx.Base>, inherits all its properties.
Note:
This effect works on any block element, but the element *cannot be positioned*; no margins or absolute positions. To position the element, put it inside another element (a wrapper div, for instance) and position that instead.
Options:
mode - set it to vertical or horizontal. Defaults to vertical.
and all the <Fx.Base> options
Example:
(start code)
var mySlider = new Fx.Slide('myElement', {duration: 500});
mySlider.toggle() //toggle the slider up and down.
(end)
*/
Fx.Slide = Fx.Base.extend({
initialize: function(el, options){
this.element = $(el).setStyle('margin', 0);
this.wrapper = new Element('div').injectAfter(this.element).setStyle('overflow', 'hidden').adopt(this.element);
this.setOptions({'mode': 'vertical'}, options);
this.now = [];
this.parent(this.options);
},
setNow: function(){
for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
based on the functions by Peter-Paul Koch (http://quirksmode.org)
*/
/*
Class: Cookie
Class for creating, getting, and removing cookies.
*/
var Cookie = {
/*
Property: set
Sets a cookie in the browser.
Arguments:
key - the key (name) for the cookie
value - the value to set, cannot contain semicolons
options - an object representing the Cookie options. See Options below:
Options:
domain - the domain the Cookie belongs to. If you want to share the cookie with pages located on a different domain, you have to set this value. Defaults to the current domain.
path - the path the Cookie belongs to. If you want to share the cookie with pages located in a different path, you have to set this value, for example to "/" to share the cookie with all pages on the domain. Defaults to the current path.
duration - the duration of the Cookie before it expires, in days.
If set to false or 0, the cookie will be a session cookie that expires when the browser is closed. Defaults to 365 days.
Example:
>Cookie.set("username", "Aaron", {duration: 5}); //save this for 5 days
key - the name of the cookie you wish to retrieve.
Returns:
The cookie string value, or false if not found.
Example:
>Cookie.get("username") //returns Aaron
*/
get: function(key){
var value = document.cookie.match('(?:^|;)\\s*'+key+'=([^;]*)');
return value ? unescape(value[1]) : false;
},
/*
Property: remove
Removes a cookie from the browser.
Arguments:
key - the name of the cookie to remove
Examples:
>Cookie.remove("username") //bye-bye Aaron
*/
remove: function(key){
this.set(key, '', {duration: -1});
}
};
/*
Script: Json.js
Simple Json parser and Stringyfier, See: <http://www.json.org/>
Authors:
- Christophe Beyls, <http://www.digitalia.be>
- Valerio Proietti, <http://mad4milk.net>
License:
MIT-style license.
*/
/*
Class: Json
Simple Json parser and Stringyfier, See: <http://www.json.org/>
*/
var Json = {
/*
Property: toString
Converts an object to a string, to be passed in server-side scripts as a parameter. Although its not normal usage for this class, this method can also be used to convert functions and arrays to strings.
Arguments:
obj - the object to convert to string
Returns:
A json string
Example:
(start code)
Json.toString({apple: 'red', lemon: 'yellow'}); "{"apple":"red","lemon":"yellow"}" //don't get hung up on the quotes; it's just a string.
The Accordion class creates a group of elements that are toggled when their handles are clicked. When one elements toggles in, the others toggles back.
Arguments:
elements - required, a collection of elements the transitions will be applied to.
togglers - required, a collection of elements, the elements handlers that will be clickable.
options - optional, see options below, and <Fx.Base> options.
Options:
show - integer, the Index of the element to show at start.
display - integer, the Index of the element to show at start (with a transition). defaults to 0.
fixedHeight - integer, if you want the elements to have a fixed height. defaults to false.
fixedWidth - integer, if you want the elements to have a fixed width. defaults to false.
onActive - function to execute when an element starts to show
onBackground - function to execute when an element starts to hide
height - boolean, will add a height transition to the accordion if true. defaults to true.
opacity - boolean, will add an opacity transition to the accordion if true. defaults to true.
width - boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!
alwaysHide - boolean, will allow to hide all elements if true, instead of always keeping one element shown. defaults to false.
The Scroller is a class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain buondaries of that element.
You must call its start method to start listening to mouse movements.
Arguments:
element - required, the element to scroll.
options - optional, see options below, and <Fx.Base> options.
Options:
area - integer, the necessary boundaries to make the element scroll.
velocity - integer, velocity ratio, the modifier for the window scrolling speed.
onChange - optionally, when the mouse reaches some boundaries, you can choose to alter some other values, instead of the scrolling offsets.
Automatically passes as parameters x and y values.
Tooltips, BubbleTips, whatever they are, they will appear on mouseover
Author:
Valerio Proietti, <http://mad4milk.net>
License:
MIT-style license.
Credits:
The idea behind Tips.js is based on Bubble Tooltips (<http://web-graphics.com/mtarchive/001717.php>) by Alessandro Fulcitiniti <http://web-graphics.com>
*/
/*
Class: Tips
Display a tip on any element with a title and/or href.
Arguments:
elements - a collection of elements to apply the tooltips to on mouseover.
options - an object. See options Below.
Options:
maxTitleChars - the maximum number of characters to display in the title of the tip. defaults to 30.
timeOut - the delay to wait to show the tip (how long the user must hover to have the tooltip appear). defaults to 100.
onShow - optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);
onHide - optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);
showDelay - the delay the onShow method is called. (defaults to 100 ms)
hideDelay - the delay the onHide method is called. (defaults to 100 ms)
className - the prefix for your tooltip classNames. defaults to 'tool'.
the whole tooltip will have as classname: tool-tip
the title will have as classname: tool-title
the text will have as classname: tool-text
offsets - the distance of your tooltip from the mouse. an Object with x/y properties.
fixed - if set to true, the toolTip will not follow the mouse.
Example:
(start code)
<img src="/images/i.png" title="The body of the tooltip is stored in the title" class="toolTipImg"/>
<script>
var myTips = new Tips($$('.toolTipImg'), {
maxTitleChars: 50 //I like my captions a little long
});
</script>
(end)
*/
var Tips = new Class({
getOptions: function(){
return {
onShow: function(tip){
tip.setStyle('visibility', 'visible');
},
onHide: function(tip){
tip.setStyle('visibility', 'hidden');
},
maxTitleChars: 30,
showDelay: 100,
hideDelay: 100,
className: 'tool',
offsets: {'x': 16, 'y': 16},
fixed: false
};
},
initialize: function(elements, options){
this.setOptions(this.getOptions(), options);
this.toolTip = new Element('div').addClass(this.options.className+'-tip').setStyles({
'position': 'absolute',
'top': '0',
'left': '0',
'visibility': 'hidden'
}).injectInside(document.body);
this.wrapper = new Element('div').injectInside(this.toolTip);
$each(elements, function(el){
this.build($(el));
}, this);
if (this.options.initialize) this.options.initialize.call(this);
